<template>
    <view class="bottom-bar">
        <view class="go-cart-bar" v-if="total">
            <view @click="openCart">
                <uni-badge size="small" :text="total.totalSpace" absolute="rightTop" type="error" :offset="[0, 0]">
                    <image src="/static/img/box.png" mode="aspectFill" style="width: 80rpx; height: 80rpx;"></image>
                </uni-badge>
            </view>
            <view class="go-cart-bar-left">
                <view>
                    <text class="total-text-label">合计：</text>
                    <text class="total-text-price">{{ total.totalPrice }}</text>
                    <text class="total-text-price-unit">元</text>
                </view>
                <text class="total-amount-text">共{{ total.totalSpace }}种商品</text>
            </view>

            <view v-if="total.totalSpace > 0" class="go-cart-bar-right" @click="sunbmitOrder(total.totalPrice)">
                <view class="btn-cart">
                    <text class="cart-text">提交订单</text>
                </view>
            </view>
            <view v-else class="go-cart-bar-right not-allow">
                <view class="btn-cart">
                    <text class="cart-text">提交订单</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { eventBus } from "@/utils/eventBus.js"
import { getUserCarList, getCartTotal, getUserTempCarList } from "@/utils/cartUtil.js"
export default {
    data() {
        return {
            total: null,
        }
    },
    mounted() {
        //初始化获取购物车
        eventBus.$on("SET_TEMP_CART", (msg) => {
            console.log("初始化获取购物车")
            if (msg) {
                this.getCartNum(msg)
            }
        })
        //获取购物车
        getUserTempCarList(true)
    },
    unmounted() {
        eventBus.$off("SET_TEMP_CART", (msg) => {
            if (msg) {
                this.getCartNum(msg)
            }
        })
    },
    methods: {
        //获取购物车总数
        getCartNum(cartData) {
            getCartTotal(cartData, (res) => {
                this.total = res
            })
        },
        openCart() {
            if (this.total.totalSpace) {
                this.$emit("openCart")
            }
        },
        sunbmitOrder() {
            this.$emit("sunbmitOrder")
        }
    },
}
</script>

<style lang="scss">
.bottom-bar {
    justify-content: flex-start;
}

.go-cart-bar {
    display: flex;
    flex-direction: row;
    flex: 1;

    .go-cart-bar-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 20rpx;

        .total-text-label {
            font-size: $font-size-24;
        }

        .total-text-price {
            font-size: $font-size-36;
            color: $app-color-main;
            margin-right: 4rpx;
        }

        .total-text-price-unit {
            font-size: $font-size-28;
        }
    }

    .total-amount-text {
        color: $app-color-text-tip;
    }

    .btn-cart {
        width: 260rpx;
        background: $app-color-main;
        height: 80rpx;
        border-radius: 80rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .cart-num {
            padding-bottom: 6rpx;
        }

        .cart-text {
            margin-left: 12rpx;
            color: $color-white;
            font-size: 32rpx;
        }
    }

    .not-allow {
        .btn-cart {
            width: 260rpx;
            background: $app-color-input-bg;
            height: 80rpx;
            border-radius: 80rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .cart-num {
                padding-bottom: 6rpx;
            }

            .cart-text {
                margin-left: 12rpx;
                color: #999;
                font-size: 32rpx;
            }
        }
    }
}
</style>
